import React from 'react';
import { useState,PropTypes } from 'react';
import { Card, Breadcrumb, Layout, Button } from 'antd';
import { applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import Search from './Search/index.js';
import List from './List/index.js';
import reducers from './reducers.js';
import ItemDrawer from './AddItemDrawer/index.js';
import {
  getComponentList,
  deleteComponent,
  getComponentType,
  addComponent,
  editComponent,
} from '../../api/component/index';


const { Content } = Layout;
function Home() {
  const store = createStore(reducers);
  getComponentType().then((res) => {
	  
	  // 存储数据
	  store.dispatch({
		  type: 'COMPONET_TYPE_LIST',
		  data: res.data
		});
  });
  getComponentList().then((res) => {
	 
	  store.dispatch({
	  		  type: 'COMPONET_LIST',
	  		  data: res.data
		});
  });
	
	
  return (
    <Card>
      <Breadcrumb separator=">">
        <Breadcrumb.Item href="/home">角色管理</Breadcrumb.Item>
        <Breadcrumb.Item href="/home/1">组件管理</Breadcrumb.Item>
      </Breadcrumb>
      <Provider store={store}>
        <Content style={{ margin: '15px 0' }}>
          <Search ></Search>
          <ItemDrawer ></ItemDrawer>
          <List ></List>
        </Content>
      </Provider>
    </Card>
  );
}

export default Home;
